.free-classes {
  width: 940px;
  height: 710px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 20px;
  float: left;
  .main-container {
    float: left;
    padding: 20px;
    width: 780px;
    height: 710px;
    position: relative;
    .free-classes-content {
      width: 740px;
      height: 530px;
      padding-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .empty-data {
        height: 540px;
      }
      .free-classes-item {
        width: 234px;
        height: 230px;
        margin-bottom: 30px;
        .img-wrap {
          position: relative;
          width: 234px;
          height: 156px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          span {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 50px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            &.live-icon {
              background: url(../../../images/student/live-icon.png) no-repeat;
              background-size: cover;
            }
            &.recorded-icon {
              background: url(../../../images/student/recorded-icon.png) no-repeat;
              background-size: cover;
            }
          }
        }
        >p {
          font-size: 16px;
          color: #333;
          line-height: 30px;
          height: 45px;
          margin: 0;
          text-align: center;
        }
        >span {
          display: block;
          width: 120px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          border-radius: 16px;
          background: #43a0ff;
          margin: 0 auto;
          cursor: pointer;
          &.status1 {
            background: #43a0ff;
          }
          &.status2 {
            background: #f7be39;
          }
          &.status3 {
            background: #00c4a0;
          }
          &.status4 {
            background: #ccc;
          }
        }
      }
    }
    .pagination-container {
      position: absolute;
      left: 50%;
      bottom: 40px;
      transform: translate(-50%, 0);
    }
    .pay-classes-item {
      .btn-span {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        border-radius: 16px;
        background: #43a0ff;
        margin: 0 auto;
        float: right;
        cursor: pointer;
        &.status0 {
          background: #43a0ff;
        }
        // &.status2 {
        //   background: #f7be39;
        // }
        // &.status3 {
        //   background: #00c4a0;
        // }
        &.status1 {
          background: #ccc;
        }
      }
      .amount {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 22px;
        color: #fe8289;
        padding-right: 4px;
        letter-spacing: -1px;
        font-weight: 500;
      }
      .pre-amount {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #aaaaaa;
        text-decoration: #aaaaaa line-through;
        letter-spacing: -1px;
      }
    }
  }
}
